<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" type="image/x-icon" href="res/image/logo.png" />
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <title>离散数学虚拟仿真实验</title>
</head>
<script type="text/javascript"></script>
<script src="js/jQuery.js"></script>
<script src="js/echarts.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
<link rel="stylesheet" href="css/bootstrap.css"/>
<link rel="stylesheet" href="css/undirectedEuler.css"/>
<link rel="stylesheet" href="css/iconfont.css"/>
<link rel="dns-prefetch" href="//cdn.mathjax.org" />
<script type="text/javascript" src="http://cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<body>
<div class="mainView">
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <a class="navbar-brand" href="./index.html" style="font-size: 1.2rem;">图论仿真实验</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarsExample04">
            <ul class="navbar-nav  mr-auto" style="width: 100%;justify-content: flex-end;">
                <li class="nav-item">
                    <a class="nav-link" href="./index.html">首页 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item dropdown active">
                    <a class="nav-link dropdown-toggle" href="#" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">无向欧拉(回)路</a>
                    <div class="dropdown-menu" aria-labelledby="dropdown04">
                    <a class="dropdown-item" href="./EulerInfo.html">引入</a>
                    <a class="dropdown-item" href="./undirectedEuler.html">无向欧拉(回)路</a>
                    <a class="dropdown-item" href="./directedEuler.html">有向欧拉(回)路</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./HamiltonianGraph.html">哈密尔顿图</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./minTree.html">最小支撑树</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./shortestPath.html" tabindex="-1" aria-disabled="true">最短道路树</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./optimalBinaryTree.html">最优二叉树</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="modal" data-target="#myModal">知识点</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="contentContainer">
        <div class="contentRight shadow contentRight shadow col-sm-12 col-md-5 col-lg-5">
             <div class="echartsDiv" id="echartsDiv"></div>
        </div>
        <div class="contentLeft col-sm-12 col-md-7 col-lg-7">
            <div class="Action shadow">
                <form class="form-inline">
                    <div class="form-group col-sm-12 col-md-12 col-lg-4 d-flex justify-content-between" style="margin:0px;padding:0px;">
                        <label  for="exampleInputName2" style="height:auto;line-height:auto;width:30%;text-align: center;">节点数</label>
                        <input type="text" style="width:30%;text-align: center;height:auto;" class="form-control" id="Num" name="NodeNum"  value="8">
                        <input  type="button" style="height:auto;width:30%;"  id="submitBtn" type="submit" class="btn btn-primary"
                            value="生成">
                        </input>
                    </div>
                    <div class="col-sm-12 col-md-12 col-lg-4 d-flex justify-content-around" style="margin-top:10px;">
                        <div class="d-inline" id="addLine"  style="font-size:13pt;">
                            <i class="iconfont icon-jia" style="font-size:20pt;"></i>
                            <p>加边</p>
                        </div>
                        <div class="d-inline" id="subLine" style="font-size:13pt;">
                            <i class="iconfont icon-jian" style="font-size:20pt;"></i>
                            <p>减边</p>
                        </div>
                        <div class="d-inline" id="loadData" style="font-size:13pt;">
                            <i class="iconfont icon-huilu_huaban1" style="font-size:20pt;"></i>
                            <p>导入</p>
                        </div>
                        <div class="d-inline" id="zhongzhi" style="font-size:13pt;">
                            <i class="iconfont icon-zhongzhi" style="font-size:20pt;"></i>
                            <p>重置</p>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-12 col-lg-4 d-flex justify-content-around" style="margin-top:10px;padding:0px;">
                        <div class="d-flex justify-content-around " style="width:35%;">
                            <button type="button" id="huiLine" class="btn btn-primary d-inline text-wrap" style="height:50px;">Fleury</button>
                            <input type="file" name="txt_file" id="txt_file" style="display:none;"/>
                        </div>
                        <div class="d-flex justify-content-around" style="width:55%;">
                            <button type="button" id="showEuler" class="btn btn-primary d-inline text-wrap" style="height:50px;">显示路径</button>
                        </div>
                    </div>
                </form>  
            </div>
            <div class="DataShow shadow" id="app">
                <div  class="exampleDiv" style="margin-bottom:5px;">
                    <div class="exampleItem1 shadow" @click="showGraphExamples(index)" v-for="(item,index) in examples" v-bind:style="{color:item.color,backgroundColor:item.bgColor}">{{item}}</div>
                </div>
                <div style="overflow: scroll;" class="dataLeft" v-show="showMatrix">
                     <p>邻接矩阵</p>
                     <p id="matrix1">{{matrix1}}</p>
                </div>
                <div style="overflow: scroll;" class="dataRight" v-show="showMatrix">
                    <p>可达性矩阵</p>
                    <p id="matrix2">{{matrix2}}</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <img src="doc/幻灯片1.PNG" alt="" style="width:100%;">
                <img src="doc/幻灯片2.PNG" alt="" style="width:100%;">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width:300px;margin-top:40vh;">
        <div class="modal-content">
            <div class="modal-body">
                <p style="text-align: center; margin-bottom: 0px;">{{message}}</p>
            </div>
            <div class="modal-footer" style="padding: 0px;">
                <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<script  src="js/xlsx.core.min.js"></script>
<script src="js/vue.js"></script>
<script type="module" src="js/undirectedEuler.js"></script>
<script type="text/x-mathjax-config">
    if(MathJax){
          MathJax.Hub.Config({
            jax: ["input/TeX","output/HTML-CSS", "output/PreviewHTML"],  //输出格式配置：latex 解析为 DOM结构
            tex2jax: {
              inlineMath: [['$','$']],
              displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
            },
            "HTML-CSS": {
              showMathMenu: false,            // 隐藏右键菜单展示
              linebreaks: {
                automatic: true,  //超长公式换行处理（默认是false不换行）
                width: "80%"      //设置换行的点，默认是遇到等号=换行
              }
            },
          });
        }
</script>
</body>
</html>